<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import Request from '@/api/axios'
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import MarkdownPreview from '@/components/Markdown/MarkdownPreview.vue'
import LikeIcon from '@/components/icons/LikeIcon.vue'
import dayjs from 'dayjs'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import relativeTime from 'dayjs/plugin/relativeTime'
import { message } from 'ant-design-vue'
import { StarOutlined } from '@ant-design/icons-vue'
// @ts-ignore
import { useRouteParams } from '@vueuse/router'
import { HttpStatusCode } from 'axios'
import { safeJsonParse } from '@/utils/safeJson'
dayjs.extend(relativeTime)
const userStore = useUserStore()
const { id, username, avatar } = storeToRefs(userStore)
const router = useRouter()
const blog_id = useRouteParams('id').value
const blog = reactive({
    time: '',
    username: '',
    userid: '',
    like: 0,
    collection: 0,
    tags: '',
    context: '',
    private: '',
    title: '',
    id: ''
})

const loadingBlog = ref(true)
onMounted(async () => {
    await Request.get({
        url: `/blog/${blog_id}`
    })
        .then((response) => {
            if (response.code === HttpStatusCode.NotFound) {
                router.push({ name: 'notfound' })
                return
            }
            blog.id = response.info.id
            blog.userid = response.info.userID
            blog.username = response.info.createdBy
            blog.time = response.info.UpdatedAt
            blog.like = response.info.like
            blog.title = response.info.title
            blog.collection = response.info.collection
            blog.context = response.info.context
            blog.tags = response.info.tags
            blog.private = response.info.isPrivate
        })
        .catch((err) => {
            console.log(err)
        })
        .finally(() => {
            loadingBlog.value = false
        })

})

// 新增点赞和收藏状态
const isLiked = ref(false);
const isCollected = ref(false);

// 点赞操作
const handleLike = async () => {
    try {
        if (isLiked.value) {
            // 取消点赞
            await Request.post({
                url: `/blog/${blog_id}/unlike`,
                data: {
                    userID: id.value.toString()
                }
            });
            blog.like--;
        } else {
            // 点赞
            await Request.post({
                url: `/blog/${blog_id}/like`,
                data: {
                    userID: id.value.toString()
                }
            });
            blog.like++;
        }
        isLiked.value = !isLiked.value;
    } catch (err) {
        message.error('操作失败，请稍后重试');
    }
};

// 收藏操作
const handleCollect = async () => {
    try {
        if (isCollected.value) {
            // 取消收藏
            await Request.post({
                url: `/blog/${blog_id}/uncollect`,
                data: {
                    userID: id.value.toString()
                }
            });
            blog.collection--;
        } else {
            // 收藏
            await Request.post({
                url: `/blog/${blog_id}/collect`,
                data: {
                    userID: id.value.toString()
                }
            });
            blog.collection++;
        }
        isCollected.value = !isCollected.value;
    } catch (err) {
        message.error('操作失败，请稍后重试');
    }
};
import Loading from '@/ui/Loading.vue'
</script>

<template>
    <el-skeleton :loading="loadingBlog" animated>
        <template #template>
            <Loading />
        </template>
        <template #default>
            <div class="blog-container">
                <!-- 博客头部信息 -->
                <div class="blog-header">
                    <h1 class="blog-title"> {{ blog.title }}</h1>
                    <p class="blog-time">{{ dayjs(blog.time).format('YYYY/MM/DD HH:mm:ss') }}</p>
                    <div class="blog-tags">
                        <a-tag color="pink" v-for="tag in safeJsonParse(blog.tags).value" :key="tag">{{ tag }}</a-tag>
                    </div>
                </div>
                <!-- 博客内容 -->
                <div class="blog-content">
                    <MarkdownPreview :text="blog.context" class="w-full" />
                </div>
                <!-- 点赞和收藏按钮 -->
                <div class="blog-actions">
                    <a-space :size="10">
                        <a-button shape="circle" size="large" :style="{ color: isLiked ? 'red' : 'gray' }"
                            @click="handleLike">
                            <template #icon>
                                <LikeIcon width="14" height="14" />
                            </template>
                            {{ blog.like }}
                        </a-button>
                        <a-button shape="circle" size="large" :style="{ color: isCollected ? 'orange' : 'gray' }"
                            @click="handleCollect">
                            <template #icon>
                                <StarOutlined />
                            </template>
                            {{ blog.collection }}
                        </a-button>
                    </a-space>
                </div>
                <!-- 评论区 -->
                <!-- TODO: -->
            </div>
        </template>
    </el-skeleton>

</template>

<style scoped>
.blog-container {
    max-width: 100vw;
    margin: 0 auto;
    padding: 20px;
}

.blog-header {
    margin-bottom: 20px;
}

.blog-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.blog-time {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
}

.blog-tags {
    margin-bottom: 20px;
}

.blog-content {
    margin-bottom: 20px;
}

.blog-actions {
    margin-bottom: 20px;
}

.comment-section {
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.comment-item {
    margin-bottom: 20px;
}

.comment-content {
    margin-bottom: 10px;
}

.comment-time {
    font-size: 12px;
    color: #999;
}

.blog-actions a-button {
    transition: all 0.3s ease;
}

.blog-actions a-button:hover {
    transform: scale(1.1);
}
</style>
